<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    ul>li{
        text-align: center;
        line-height: 30px;
    }
    /* ul>li:nth-child(even){
        background-color: #eee;
    }
    ul>li:nth-child(odd){
        background-color: #ccc;
    } */
    ul>li.curr{
        background-color: #cccccc !important;
    }
</style>
<body>
    <ul>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
        <li>天王盖地虎，全上985</li>
    </ul>
</body>
<script>
    window.onload=function(){
        //获取所有的li 
        var lis = document.querySelectorAll("li");
        //es6 循环遍历
        lis.forEach((item,index)=>{
            //判断是否为偶数行
            if(index%2==0){
                item.style.backgroundColor="#eee";
            }else{
                item.style.backgroundColor="#ccc";
            }
            //鼠标经过
            item.onmouseover = function(){
                //给li添加一个类
                item.className="curr";
            }
            //鼠标离开
            item.onmouseout = function(){
                //去掉添加的类
                item.className="";
            }
        })


    }
</script>
<html>